{##																#}
{## Developed for the University of Nottingham G52GRP module 	#}
{##																#}
{## Written by:	Marcus Whybrow (mxw18u) 						#}
{## Group: 		gp09-drm 										#}
{##																#}

{% extends "libraries/profile.html" %}

{% block title %}
Your Libraries | {{ block.super }}
{% endblock %}

{% load truncate_filters %}

{% block page_title %}libraries-library-list{% endblock %}

{% block breadcrumbs %}
{{ block.super }}
<li id="bc-libraries-library-list"><a href="{% url library_list %}">Libraries</a></li>
{% endblock %}

{% block head %}
<link rel="stylesheet" href="/media/js/jqtransform/jqtransform.css" />
<script type="text/javascript" src="/media/js/jquery-ui-1.8rc1.custom.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="/media/js/utils.js"></script>
<script type="text/javascript">
	$(function() {
		
		// Close events for overlays
		
		$('#accept-overlay input.overlay-ok').click(function() {
			$.unblockUI();
			return false;
		});
		
		$('#delete-overlay input.overlay-ok').click(function() {
		
			var pk = $(this).attr('id');
			
			connection('{% url api_delete_collection %}', { pk: pk }, function(data) {
				$.unblockUI();
				$.unblockUI();
				$('#' + pk).slideUp('200', function() {
					$(this).remove();
				}, function() {
					$.unblockUI();
				});
			});
			return false;
		});
		
		$('#delete-overlay input.overlay-cancel').click(function() {
			$.unblockUI();
			return false;
		});
		
		// Library List
		
		function library_hover_over() {
			$(this).find('button.delete, button.really').css('display', 'block');
		}
		
		function library_hover_out() {
			$(this).find('button.delete').css('display', 'none');
			$(this).find('button.really').remove();
		}
		
		function library_click_delete() {
			var library_row = $(this).parent();
			var library_pk = library_row.attr("id");
			
			if (library_row.find('button.really').length == 0) {
				
				library_row.append('<button class="really">really</button>');
			
				var really = library_row.find('button.really');
				
				really.css('display', 'block');
				
				really.click(function() {
										
					connection('{% url api_get_collection_detail %}', { pk: library_pk }, function(data) {
						if (data.collection.children == 0 && data.collection.books == 0) {
							// There are no books or collections within this collection
							connection('{% url api_delete_collection %}', { pk: library_pk }, function(data) {
								library_row.slideUp('200', function() {
									$(this).remove();
								});
							});
						} else {
							// The collection cannot be deleted without user intervention
							$('#delete-overlay input.overlay-ok').attr('id', data.collection.pk);
							overlay($('#delete-overlay'));
						}
					});
				});
			}
		}
		
		$("ul#library-list li").append('<button class="delete">delete</span>');
		
		$("ul#library-list li").hover(library_hover_over, library_hover_out);
		
		$("ul#library-list li button.delete").click(library_click_delete);
		
		// Add New Library
		
		$("form#new-library-form").submit(function() {
			
			var form = $(this);
			
			var formData = form.serialize();
			
			form.block({ 
				fadeIn: 10,
				fadeOut: 10,
				css: { 
		            border: 'none', 
		            padding: '15px', 
		            backgroundColor: '#000', 
		            '-webkit-border-radius': '10px', 
		            '-moz-border-radius': '10px', 
		            opacity: .5, 
		            color: '#fff' 
		        }, 
		        message: 'Adding Library' 
		    });
		    
		    connection('{% url api_save_collection %}', formData, function(data) {
		    	var name = data.collection.name;
				var truncateLength = 40;
				
				if (name.length > truncateLength) {
					name = name.substring(0, truncateLength) + '...';
				}
				
				var description = data.collection.description;
				var url = data.collection.url;
				var pk = data.collection.pk;
				
				var listItem = '<li id="' + pk + '" style="display: none">' +
				'<img src="/media/images/events/home.png" width="16" height="16" title="Library" />' +
				'<a class="item-title img-title" href="' + url + '">' + name + ' →</a>' +
				'<p class="item-subtitle">0 bookshelves, 0 unsorted books</p>' +
				'<button class="delete">delete</button>' +
				'</li>';
				
				$("ul#library-list").append(listItem);
				$("li#" + pk).slideDown('200');
				
				$("#" + pk).hover(library_hover_over, library_hover_out);
				$("#" + pk + " button.delete").click(library_click_delete);
		    }, function() {
		    	form.unblock();
		    });
			
			form.find(':input[name="name"]').val('');
			
			return false;
		});
	});
</script>
{% endblock %}

{% block content %}
	<div class="section">
		<div class="inner">
			<h2>Your Library List</h2>
			<p>The following are your libraries.</p>
		</div>
	</div>
	<div class="section">
		<div class="inner">
			<div class="container clearfix">
				<div class="two-thirds alpha">
					<div class="rounded-wrapper">
						<h3>Your Libraries</h3>
						<ul id="library-list" class="double-title item-list">
							{% for library in object_list %}
								<li id="{{ library.pk }}">
									<img src="/media/images/events/home.png" width="16" height="16" title="Library" />
									<a class="item-title img-title" href="{{ library.get_absolute_url }}">{{ library.name|truncatechars:40 }} →</a>
									<p class="item-subtitle">{{ library.children.all|length }} bookshel{{ library.children.all|length|pluralize:'f,ves' }}, {{ library.books.all|length }} unsorted book{{ library.books.all|length|pluralize }}</p>
								</li>
							{% endfor %}
						</ul>
						<h3>Add a New Library</h3>
						<form id="new-library-form" action="" method="post">
							<input type="hidden" name="collection_type" value="library" />
							{{ form.name }}
							<input type="submit" value="Create" />
						</form>
					</div>
					{% if object_list %}
					{% else %}
					<p class="empty-list-text center">Ah Hello, Pick a name for your new library to get started.</p>
					{% endif %}
				</div>
				<div class="third">
					<h3>Overview</h3>
					<p>A library represents a large collection of different books, for example you may have a "Home" library and an "Office" library.</p>
					
					<h3>Deleting</h3>
					<p>You may delete any empty libraries you create, here in the library list. If you have added anything to the library, you shall be asked what you want to do with the contents: delete it or move it.</p>
					
					<h3>Editing</h3>
					<p>To add a description to your libraries, select the library you wish to edit from the list to the left.</p>
					
					<h3>Adding</h3>
					<p>Creating a new library is as easy as choosing its name, and filling in the form below. All library names must be different.</p>
				</div>
			</div>
		</div>
	</div>
	
	<div id="accept-overlay" class="overlay">
		<div class="overlay-header">
			<h1 class="target"></h1>
		</div>
		<div class="overlay-body">
			<p class="target"></p>
		</div>
		<div class="overlay-footer clearfix">
			<input type="button" class="overlay-ok overlay-button" value="Alright" /> 
		</div>
	</div>
	
	<div id="delete-overlay" class="overlay">
		<div class="overlay-header">
			<h1>This Library Is Not Empty</h1>
		</div>
		<div class="overlay-body">
			<p class="error target">If you delete this library, all the bookshelves and their books will be deleted forever. This cannot be undone.</p>
		</div>
		<div class="overlay-footer clearfix">
			<input style="float:left" type="button" class="overlay-cancel overlay-button" value="← Cancel" />
			<input type="button" class="overlay-ok overlay-button danger" value="OK, delete everything!" />
		</div>
	</div>
{% endblock %}